<template>
  <div>
    <el-button @click="look">预览</el-button>
    <el-button @click="ru">导入</el-button>
    <el-button @click="dao">导出</el-button>
    <el-button @click="save">保存</el-button>
    <el-button @click="clear">清空</el-button>
    <div v-show="false">
      <fileJson ref="fileJson" @file="file"></fileJson>
    </div>
    <form-create ref="form" @submit="submit" :option="option" :rule="rule"></form-create>
    <div>
      <casa></casa>
    </div>
    <div v-if="lookRule">
      <look ref="look" :option="option" :rule="lookRule"></look>
    </div>
  </div>
</template>

<script>
import casa from "./casa"
import look from "./look"
import fileJson from "./file"
export default {
  data() {
    return {
      option: {
        // 行内表单模式
        inline: false,
        // 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width
        labelPosition: "right",
        // 表单域标签的后缀
        labelSuffix: "",
        // 是否显示必填字段的标签旁边的红色星号
        hideRequiredAsterisk: false,
        // 表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 auto。
        labelWidth: "125px",
        // 是否显示校验错误信息
        showMessage: true,
        // 是否以行内形式展示校验信息
        inlineMessage: false,
        // 是否在输入框中显示校验结果反馈图标
        statusIcon: false,
        // 是否在 rules 属性改变后立即触发一次验证
        validateOnRuleChange: true,
        // 是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效
        disabled: false,
        // 用于控制该表单内组件的尺寸 medium / small / mini
        size: "medium"
      },
      rule: [
        {
          type: "input",
          title: "商品名称",
          field: "goods_name",
          value: "iphone 7",
          col: {
            span: 12,
            labelWidth: 150
          },
          props: {
            type: "text",
            disabled: false
          },
          validate: [
            { required: true, message: "请输入goods_name", trigger: "blur" }
          ]
        },
        {
          type: "InputNumber",
          field: "price",
          title: "价格",
          value: 1,
          props: {
            precision: 2,
            disabled: false
          }
        },
        {
          type: "autoComplete",
          title: "自动完成",
          field: "auto",
          value: "xaboy",
          props: {
            disabled: false
          }
          // props: {
          //   fetchSuggestions: function (queryString, cb) {
          //     cb([
          //       { value: queryString },
          //       { value: queryString + queryString }
          //     ])
          //   }
          // }
        },
        {
          type: "checkbox",
          title: "标签",
          field: "label",
          value: ["1", "2", "3"],
          options: [
            { value: "1", label: "好用", disabled: true },
            { value: "2", label: "方便", disabled: false },
            { value: "3", label: "实用", disabled: false },
            { value: "4", label: "有效", disabled: false }
          ],
          props: {
            disabled: false
          }
        },
        {
          type: "select",
          field: "cate_id",
          title: "产品分类",
          value: ["104", "105"],
          options: [
            { value: "104", label: "生态蔬菜", disabled: false },
            { value: "105", label: "新鲜水果", disabled: false }
          ],
          props: {
            multiple: true,
            disabled: false
          },
          on: {
            // 事件on 类似于element
            change: function (e) {
              console.log(e)
            }
          }
        },
        {
          type: "switch",
          title: "是否上架",
          field: "is_show",
          value: "1",
          props: {
            activeValue: "1",
            inactiveValue: "0",
            disabled: false
          }
        },
        {
          type: "cascader",
          title: "所在区域",
          field: "address",
          value: ["陕西省", "西安市", "新城区"],
          props: {
            options: [
              {
                value: "beijing",
                label: "北京",
                children: [
                  {
                    value: "gugong",
                    label: "故宫"
                  },
                  {
                    value: "tiantan",
                    label: "天坛"
                  },
                  {
                    value: "wangfujing",
                    label: "王府井"
                  }
                ]
              },
              {
                value: "jiangsu",
                label: "江苏",
                children: [
                  {
                    value: "nanjing",
                    label: "南京",
                    children: [
                      {
                        value: "fuzimiao",
                        label: "夫子庙"
                      }
                    ]
                  },
                  {
                    value: "suzhou",
                    label: "苏州",
                    children: [
                      {
                        value: "zhuozhengyuan",
                        label: "拙政园"
                      },
                      {
                        value: "shizilin",
                        label: "狮子林"
                      }
                    ]
                  }
                ]
              }
            ],
            disabled: false,
            clearable: true,
            filterable: true,
            on: {
              change: function (val) {
                console.log(val)
              }
            }
          }
        },
        {
          type: "DatePicker",
          field: "section_day",
          title: "活动日期",
          value: ["2018-02-20", "2021-02-15"],
          props: {
            type: "datetimerange",
            format: "yyyy-MM-dd HH:mm:ss",
            placeholder: "请选择活动日期",
            disabled: false
          }
        },
        {
          type: "TimePicker",
          field: "section_time",
          title: "活动时间",
          value: [],
          props: {
            isRange: true,
            disabled: false
          }
        },
        {
          type: "ColorPicker",
          field: "color",
          title: "颜色",
          value: "#ff7271",
          props: {
            disabled: false
          }
        }
      ],
      lookRule: ""
    }
  },
  mounted() {
    // console.log(this.$refs.form);
    // console.log(this.$refs.form.updateValue)
  },
  methods: {
    look: function () {
      const obj = JSON.stringify(this.rule)
      const rule = JSON.parse(obj)
      const update = JSON.parse(this.$refs.form.updateValue)
      this.update(rule, update)
    },
    update(rule, update) {
      rule.map((res) => {
        res.props.disabled = true
        res.value = update[res.field]
        return 1
      })

      this.lookRule = rule
      this.$nextTick(() => { // dom 更新之后的回调 比如if 创建 节点
        this.$refs.look.dialogVisible = true
      })
    },
    dao: function () {
      var content = JSON.stringify(this.rule)
      var eleLink = document.createElement("a")
      eleLink.download = "InterpretationLithology.json"
      eleLink.style.display = "none"
      // 字符内容转变成blob地址
      var blob = new Blob([content])
      eleLink.href = URL.createObjectURL(blob)
      // 触发点击
      document.body.appendChild(eleLink)
      eleLink.click()
      // 然后移除
      document.body.removeChild(eleLink)
    },
    ru: function () {
      this.$refs.fileJson.click()
    },
    file: function (val) {
      console.log(val)
    },
    clear: function () {},
    save: function () {},
    submit: function (val) {
      console.log(val)
    }
  },
  components: {
    look,
    fileJson,
    casa
  }
}
</script>

<style>
</style>
